<template>
    <div class="luckdraw">
      <p align="center"><img src="static/img/cjdjj.jpg" alt="" width="40%"></p>
      <form action="" style="padding-bottom: 2rem">
        <ul>
          <li><span>*商户名称：</span><input v-model=connectionForm.customer_name type="text" class="inputshop" maxlength="30" require="require"></li>
          <li><span>*所在城市：</span><input v-model=connectionForm.address type="text" class="inputshop" maxlength="40" require="require"></li>
          <li><span>*您的姓名：</span><input v-model=connectionForm.your_name type="text" class="inputshop" maxlength="20" require="require"></li>
          <li><span>*联络电话：</span><input v-model=connectionForm.mobile type="text" class="inputshop" maxlength="11" require="require"></li>
          <li>
            <span>*验证码：</span><input v-model=connectionForm.code type="text" class="inputcode" maxlength="4" require="require">
            <span class="code">{{verifyCode}}<span class="changeCode" @click="getVerifyCode">看不清换一个</span></span>
          </li>
          <li  style="text-align:center; border-bottom:none; padding:20px 0 50px 0;">
            <Button class="submit_button" @click="submit()">
              立即抽取
            </Button>
          </li>
        </ul>
      </form>
    </div>
</template>

<script>
import {isvalidPhone} from 'utils/validators'
// import axios from 'axios'
export default {
  name: 'LuckDraw',
  data () {
    return {
      connectionForm: {
        customer_name: '',
        address: '',
        your_name: '',
        mobile: '',
        code: '',
        verifyCode_key: ''
      },
      verifyCode: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    error (nodesc, message) {
      this.$Notice.error({
        title: '信息有误',
        desc: nodesc ? '' : message
      })
    },
    submit () {
      if (this.connectionForm.customer_name === '' || this.connectionForm.mobile === '') {
        this.error(false, '商户名称及电话不能为空')
        return
      }
      if (!isvalidPhone(this.connectionForm.mobile)) {
        this.error(false, '电话号有误')
        return
      }
      // Vue.set(this.connectionForm, 'verifyCode_key', this.verifyCode_key)
      this.$store.dispatch('api_submit_contact', this.connectionForm).then(resp => {
        console.log(resp.data)
      }).catch(function (error) {
        console.log(error.data)
        this.error(false, '验证失败')
      })
      // axios.post(`http://localhost:8000/api/v1/product/contact/`, this.connectionForm).then(resp => {
      //   console.log(resp.data)
      // }).catch(function (error) {
      //   console.log(error+ '1111')
      // })
    },
    init () {
      this.getVerifyCode()
    },
    getVerifyCode () {
      this.$store.dispatch('api_verify_code').then(resp => {
        this.verifyCode = resp.data.verifyCode
        this.connectionForm.verifyCode_key = resp.data.verifyCode_key
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .luckdraw {
    margin-top 1rem
    background: #34414a;
    width: 100%;
    ul {
      width 60%
      margin 0 auto
      li{
        font-size: 2rem;
        color: #b1b0b0;
        font-family: "Yahei";
        border-bottom: 1px solid #babdbf;
        height: 6rem;
        line-height: 6rem;
        .inputshop {
          width 60%
          padding-left 1rem
          background: none;
          border: none;
          height: 6rem;
          color: #FFF;
          border: 0px #fff solid;
          font-size: 1.7rem;
        }
        .inputcode {
          width 50%
          padding-left 1rem
          background: none;
          border: none;
          height: 6rem;
          color: #FFF;
          border: 0px #fff solid;
          font-size: 1.7rem;
        }
        @media only screen and (max-width: 60em) {
          .inputcode {
            width 30%
          }
        }
        .code {
          color: blue;
          font-size: 2rem
          border: 0;
          padding: 2px 3px;
          letter-spacing: 3px;
          font-weight: bolder;
          width: 5%
          height: 6rem
          line-height: 6rem;
          text-align: center;
          vertical-align: middle;
          .changeCode {
            cursor: pointer
            padding-left 1.5rem
            text-decoration: none;
            font-size: 1rem;
            color: #F93;
          }
        }
        .submit_button {
          color: #fff
          font-size: 1.5rem;
          width: 21rem;
          background #34414a;
        }
      }
    }
    @media only screen and (max-width: 40em) {
      ul {
        width 90%
      }
    }
  }
</style>
